<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				font-size: 50px;
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfa;
				
				/*
				 对于开启了定位元素，可以通过z-index属性来指定元素的层级关系
				   z-index需要一个整数作为参考，值越大元素的层级越高
				     元素的层级越优先显示
				     
				   如果元素的层级一样，则优先显示靠下的元素
				   
				   * 祖先的元素层级再高也不会盖住后代元素*/
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: orange;
				position: absolute;
				top: 50px;
				left:50px;
			}
			.box3{
				width: 200px;
				height: 200px;
				background-color: yellow;
				position:absolute;
				top: 100px;
				left:100px;
				
			}
		</style>
	</head>
	<body>
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
	</body>
</html>
